<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

import {  getShopProfitTotalList } from '#/api';
import { useTable } from '#/hooks/useTable';

const searchForm = reactive({

  shopId: '',
  shopName: '',
 
});
const {
  tableData,
  page,
  loading,
  resetParams,
  getList,
  handleCurrentChange,
  handleSizeChange,
} = useTable({
  apiFn: getShopProfitTotalList,
  params: searchForm,
});

onMounted(() => {
});
const columns = [

  {
    title: '店铺名',
    dataIndex: 'shopName',
    key: 'shopName',
    width: 120,
  },
   {
    title: '销售单量',
    dataIndex: 'saleCount',
    key: 'saleCount',
    width: 100,
  },
   {
    title: '销售金额',
    dataIndex: 'saleAmount',
    key: 'saleAmount',
    width: 100,
  },
  {
    title: '采购单量',
    dataIndex: 'purchaseCount',
    key: 'purchaseCount',
    width: 100,
  },
  {
    title: '采购金额',
    dataIndex: 'purchaseAmount',
    key: 'purchaseAmount',
    width: 140,
  },
  {
    title: '其他支出',
    dataIndex: 'otherAmount',
    key: 'otherAmount',
    width: 140,
  },
  {
    title: '纯利润',
    dataIndex: 'profitAmount',
    key: 'profitAmount',
    width: 80,
  },

 
];


</script>

<template>
  <div class="relative h-full p-4">
    <div class="mb-4">
      <a-form layout="inline">
        <a-form-item label="店铺名称" style="margin-bottom: 5px">
          <a-input
            v-model:value="searchForm.shopName"
            allow-clear
            placeholder="请输入店铺名称"
          />
        </a-form-item>



        <a-form-item>
          <a-button class="mr-2" @click="resetParams">重置</a-button>
          <a-button type="primary" @click="getList">搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="{
          total: page.total,
          pageSize: page.pageSize,
          showSizeChanger: true,
          current: page.page,
          class: 'pr-14',
          pageSizeOptions: page.pageSizes,
          showTotal: (total, range) => `${range[0]}-${range[1]} 总 ${total} 条`,
        }"
        @change="
          (da, size) => {
            // console.log('change', da, size);
            if (da.pageSize !== page.pageSize) {
              handleSizeChange(da.pageSize);
              return;
            }
            handleCurrentChange(da.current);
          }
        "
      >
      </a-table>
    </div>
  
  </div>
</template>

<style scoped>
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
